<template>
  <div>
    <el-container>
      <!-- 侧边栏  -->
      <el-aside :width="asideWidth" style="min-height: 100vh;background-color: #001529">
        <div style="height: 60px;color: white;display: flex;align-items: center;justify-content: center">
          <img src="@/assets/logo.png" style="width: 40px; height: 40px; border-radius: 50%">
          <span class="logo-title" v-show="!isCollapse">学生选课信息系统</span>
        </div>

        <el-menu :default-openeds="['info']" :collapse="isCollapse"  collapse-transition="false" router background-color="#001529" text-color="rgba(255,255,255,0.65)"
                 active-text-color="#fff" style="border: none" :default-active="$route.path">
          <el-menu-item index="/home">
            <i class="el-icon-s-house"/>
            <span slot="title">系统首页</span>
          </el-menu-item>

          <el-submenu index="info">
            <template slot="title">
              <i class="el-icon-menu"/>
              <span>信息管理</span>
            </template>
            <el-menu-item index="/user" v-if="user.role === '管理员'">用户信息</el-menu-item>
            <el-menu-item index="/students">学生信息</el-menu-item>

            <el-menu-item index="/news">课程信息</el-menu-item>
            <el-menu-item index="/notice">系统公告</el-menu-item>
            <el-menu-item index="/logs">系统日志</el-menu-item>
            <el-menu-item index="/charts">数据统计</el-menu-item>
            <el-menu-item index="/orders">选课情况</el-menu-item>
          </el-submenu>

        </el-menu>
      </el-aside>

      <el-container>
        <!--  头部区域   -->
        <el-header>
          <i :class="collapseIcon" style="font-size: 26px" @click="handleCollapse"/>

          <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-left: 20px">
            <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: $route.path }">{{ $route.meta.name }}</el-breadcrumb-item>
          </el-breadcrumb>

          <div style="flex: 1; width: 0; display: flex; align-items: center; justify-content: flex-end">
            <el-dropdown placement="bottom">
              <div style="display: flex; align-items: center; cursor: default">
                <img :src="user.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" style="width: 40px; height: 40px">
                <span>{{ user.name }}</span>
              </div>

              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="$router.push('/person')">个人信息</el-dropdown-item>
                <el-dropdown-item @click.native="$router.push('/password')">修改密码</el-dropdown-item>
                <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>

        <!--  主体区域  -->
        <el-main>
          <router-view @update:user="updateUser"/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import request from "@/util/request";
  export default {
    name:"HomeView",
    data(){
      return {
        isCollapse:false,
        asideWidth:'240px',
        collapseIcon:'el-icon-s-fold',
        users: [],
        user: JSON.parse(localStorage.getItem('honey-user') || '{}'),
      }
    },
    mounted() { //页面加载后触发
      // axios.get("http://localhost:9999/user/selectAll").then(res => {
      //   console.log(res.data) //后台返回的数据
      //   this.users = res.data.data
      // })

      // request.get('/user/selectAll').then(res => {
      //   this.users = res.data
      // })
      if (!this.user.id) { // 当前浏览器没有用户信息
        this.$router.push('/login')
      }
    },
    methods:{
      // 获取子组件传过来的数据，更新当前页面数据
      updateUser(user) {
        this.user = JSON.parse(JSON.stringify(user))  // 让父级的对象跟子级毫无关联
      },
      /*preview(url) {
        window.open(url)  // 默认图片是预览的
      },
      showUrls() {
        console.log(this.urls)
      },
      handleMultipleFileUpload(response, file, fileList) {
        this.urls = fileList.map(v => v.response?.data)
      },
      handleTableFileUpload(row, file, fileList) {
        row.avatar = file.response.data
        // this.$set(row, 'avatar', file.response.data) // 强制设置
        // 触发更新
        request.put('/url/update', row).then(res => {
          if (res.code == '200') {
            this.$message.success("上传成功")
          } else {
            this.$message.error(res.msg)
          }
        })
      },
      handleFileUpload(response, file, fileList) {
        this.fileList = fileList
      },*/
      logout() {
        localStorage.removeItem('honey-user')  // 清除当前 token 和 用户数据
        this.$router.push('/login')
      },
      handleFull() {
        document.documentElement.requestFullscreen()
      },
      handleCollapse() {
        this.isCollapse = !this.isCollapse
        this.asideWidth = this.isCollapse ? '64px' : '200px'
        this.collapseIcon = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'
      }
    }

  }
</script>

<style>
  .el-menu--inline{
    background-color: #000c17 !important;
  }
  .el-menu--inline .el-menu-item {
    background-color: #000c17 !important;
    padding-left: 49px;
  }
  .el-menu-item:hover, .el-submenu__title:hover {
    color: #fff !important;
  }
  .el-submenu__title:hover i {
    color: #fff !important;
  }
  .el-menu-item.is-active {
    background-color: #40a9ff !important;
    border-radius: 5px !important;
    width: calc(100% - 8px);
    margin-left: 4px;
  }
  .el-menu-item.is-active i, .el-menu-item.is-active .el-tooltip {
    margin-left: -4px;
  }
  .el-menu-item {
    height: 40px !important;
    line-height: 40px !important;
  }
  .el-submenu__title {
    height: 40px !important;
    line-height: 40px !important;
  }
  .el-submenu .el-menu-item {
    min-width: 0 !important;
  }
  .el-menu--inline .el-menu-item.is-active {
    padding-left: 45px !important;
  }

  .el-aside {
    transition: width .3s;
    box-shadow: 2px 0 6px rgba(0,21,41,.35);
  }
  .logo-title {
    margin-left: 5px;
    font-size: 20px;
    transition: all .3s;
  }
  .el-header {
    box-shadow: 2px 0 6px rgba(0,21,41,.35);
    display: flex;
    align-items: center;
  }
</style>
